<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="navbar">
        <li class="list-item"><i class="fa-solid fa-house"></i>
            <span class="list-item-name">Home</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-user"></i>
            <span class="list-item-name">Profile</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-gear"></i>
            <span class="list-item-name">Settings</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-bag-shopping"></i>
            <span class="list-item-name">Bag</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-cloud"></i>
            <span class="list-item-name">Cloud</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-plane"></i>
            <span class="list-item-name">Plane</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-video"></i>
            <span class="list-item-name">Video</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-umbrella"></i>
            <span class="list-item-name">Umbrella</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-rocket"></i>
            <span class="list-item-name">Rocket</span>
        </li>
        <li class="list-item">
            <i class="fa-solid fa-magnifying-glass"></i>
            <span class="list-item-name">Magnifying</span>
        </li>
    </div>
</body>

</html>